<template>
	<view>
		<nav-bar back>{{type==="notice"?"群公告":""}}<button v-show="type==='notice'" class="confirm"
				@click="onSubmit()">完成</button></nav-bar>
		<view class="main" v-show="type!=='notice'">
			<view v-if="type==='name'" class="name">
				<view class="title">修改群聊名称</view>
				<view class="sub-title">
					修改群聊名称后,将在群内通知其他成员。
				</view>
				<view class="edit">
					<image :src="group.headImageThumb" alt="" style="width: 75rpx;height: auto;" mode="widthFix" />
					<uni-easyinput :inputBorder="false" v-model="group.name" />
				</view>
				<button @click="onSubmit()">完成</button>
			</view>
			<view v-if="type==='remarkGroupName'" class="remarkGroupName">
				<view class="title">备注</view>
				<view class="sub-title">
					群聊的备注仅自己可见
				</view>
				<view class="edit">
					<image :src="group.headImageThumb" alt="" style="width: 75rpx;height: auto;" mode="widthFix" />
					<uni-easyinput :inputBorder="false" v-model="group.remarkGroupName" placeholder="备注" />
				</view>
				<view class="tip">
					群聊名称：{{group.name}} <span @click="group.remarkGroupName=group.name">填入</span>
				</view>
				<button @click="onSubmit()">完成</button>
			</view>
			<view v-if="type==='showNickName'" class="showNickName">
				<view class="title">我在群里的昵称</view>
				<view class="sub-title">
					昵称修改后，只会在此群内显示，群内成员都可以看见。
				</view>
				<view class="edit">
					<image :src="userStore.userInfo.headImageThumb" alt="" style="width: 75rpx;height: auto;" mode="widthFix" />
					<uni-easyinput :inputBorder="false" v-model="group.showNickName" />
				</view>
				<button @click="onSubmit()">完成</button>
			</view>
			<view v-if="type==='admin'" class="showNickName">
				<view class="title">群管理员</view>
				<view class="sub-title" style="text-align: left;">
					<view>• 管理员可协助群主管理群聊，拥有发布群公告、移除群成员等能力。</view>
					<view>• 只有群主具备设置管理员、解散群聊的能力。</view>
				</view>
				<view class="groupMembers" v-for="member in groupMembers" :key="member.userId">
					<view class="edit" v-if="member.isAdmin==='1'">
						<image :src="member.headImage||'/static/image/pic.jpg'" alt="" style="width: 75rpx;height: auto;"
							mode="widthFix" />
						<view>{{member.showNickName}}</view>
						<span class="rig" @click="onAdministrators(member)">移除</span>
					</view>
				</view>
				<view class="edit"
					style="border-top: none;height: 74rpx;border-top: 1rpx solid #ccc;border-bottom: 1rpx solid #ccc" @click="uni.navigateTo({
					url: `/pages/group/group-invite?id=${groupId}&type=管理员`
				})">
					<uni-icons type="plus" size="28" style="margin:0 30rpx 0 16rpx"></uni-icons>
					<view>添加成员</view>
				</view>
			</view>
		</view>
		<view v-show="type==='notice'" class="notice">
			<uni-easyinput :inputBorder="false" class="content" type="textarea" v-model="group.notice" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: '',
				groupId: '',
				group: {},
				groupMembers: [],
			}
		},
		mounted() {},
		methods: {
			loadGroupInfo() {
				this.$http({
					url: `/group/find/${this.groupId}`,
					method: 'GET'
				}).then((group) => {
					this.group = group;
					console.log('群状态', this.group)
					// 更新聊天页面的群聊信息
					this.chatStore.updateChatFromGroup(group);
					// 更新聊天列表的群聊信息
					this.groupStore.updateGroup(group);
				});
			},
			loadGroupMembers(id) {
				this.$http({
					url: `/group/members/${id}`,
					method: "GET"
				}).then((members) => {
					this.groupMembers = members.filter(m => !m.quit);
					this.initFriendItems()
					console.log('groupMembers', this.groupMembers);
				})
			},
			// 管理员
			onAdministrators(member, idx) {
				this.$http({
					url: `/groupMember/updateMemberRole/${this.groupId}?userId=${member.userId}&isAdmin=0`,
					method: 'PUT',
				}).then(() => {
					uni.showToast({
						title: `已将${member.showNickName}从管理员中移除`,
						icon: 'none'
					})
					this.loadGroupMembers(this.groupId);
				});
			},
			onSubmit() {
				if (this.group.id) {
					this.$http({
						url: "/group/modify",
						method: "PUT",
						data: this.group
					}).then((group) => {
						this.groupStore.updateGroup(group);
						uni.showToast({
							title: "修改群聊信息成功",
							icon: 'none'
						});
						setTimeout(() => {
							let pages = getCurrentPages();
							let prevPage = pages[pages.length - 2];
							prevPage.$vm.loadGroupInfo();
							uni.navigateBack();
						}, 1000);

					})
				}
			},
			isSelf(member) {
				return this.group.ownerId === member.userId || this.userStore.userInfo.id == member
					.userId;
			},
		},
		onLoad(options) {
			this.groupId = options.id
			this.type = options.type
			this.loadGroupInfo();
		},
		onShow() {
			this.loadGroupMembers(this.groupId);
		}
	}
</script>

<style scoped lang="scss">
	// background-color: #fff;
	.title {
		button {
			position: absolute;
			color: #fff;
			background-color: #07c160;
			right: 20rpx;
			bottom: 10rpx;
			padding: 0;
			font-size: 30rpx !important;
			width: 120rpx;
			line-height: 60rpx;
		}
	}

	.main {
		height: 100%;
		padding: 300rpx 40rpx;

		.title {
			font-size: 40rpx;
			text-align: center;
		}

		.sub-title {
			text-align: center;
			margin: 40rpx 0 60rpx;

		}

		.groupMembers {
			.edit {
				border-bottom: none;
			}
		}

		.edit {
			border-top: 1rpx solid #ccc;
			border-bottom: 1rpx solid #ccc;
			display: flex;
			padding: 20rpx 44rpx;
			justify-content: flex-start;
			align-items: center;

			view {
				flex: 1;
			}

			.rig {
				color: #5b6e96;
				font-size: 26rpx;
				font-weight: 700;
			}

			image {
				border-radius: 10rpx;
				margin-right: 20rpx;
			}
		}

		.tip {
			font-size: 24rpx;
			color: #ccc;
			margin-top: 20rpx;

			span {
				color: #35567f;
			}
		}


		button {
			position: fixed;
			left: 50%;
			bottom: 200rpx;
			transform: translateX(-50%);
			background-color: #07bd5f;
			color: #fff;
			width: 300rpx;
		}
	}

	.notice {
		.uni-easyinput {
			::v-deep .uni-easyinput__content {
				padding: 0 20rpx;
				height: 100%;
				height: calc(100vh - 50px);
				margin-top: 50px;
				font-size: 30rpx;
				// #ifndef H5
				height: calc(100vh - 50px - var(--status-bar-height) - $im-nav-bar-height);
				margin-top: calc($im-nav-bar-height + var(--status-bar-height));
				// #endif
			}
		}
	}
</style>